<template>
  <base-breadcrumb>
    <a-card>
      <!-- <TitleName title="竣工资料模板"></TitleName> -->
      <a-row :gutter="24">
        <a-col :md="4" :sm="4" class="col-center">
          <h3 style="margin-bottom: 2.5em">竣工资料分类</h3>
          <a-radio-group style="width: 100%" v-model="curTemplateIndex" class="col-center" button-style="solid">
            <a-radio-button
              :value="index"
              v-for="(item, index) in leftList"
              :key="index"
              style="width: 100%; text-align: center; margin-bottom: 20px"
              @click="getDataList(item.id)"
              >
              <Ellipsis tooltip :length="16" style="word-break: break-all;">{{ item.name }}{{item.enabled?'':'(禁用)'}}</Ellipsis>
              </a-radio-button
            >
          </a-radio-group>

          <div class="footer-btn">
            <a-button type="primary" icon="plus" @click="handleTempUpdate('add')" v-btnPermission="'tm_001_add_05'" >新增</a-button>
            <a-button type="primary" @click="handleTempUpdate('edit')" v-btnPermission="'tm_001_edi_06'">编辑</a-button>
          </div>
        </a-col>
        <a-col :md="20" :sm="20" class="col-left">
          <a-button style="margin-bottom: 2.5em" type="primary" @click="addEdit({}, 'add')" v-btnPermission="'tm_001_add_07'" >添加资料</a-button>
          <a-table row-key="id" style="width: 100%" :data-source="dataSource" :columns="columns" bordered>
            <!-- 操作 -->
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="addEdit(record)" v-btnPermission="'tm_001_edi_08'">编辑</a>
                <a-divider v-btnPermission="'tm_001_del_09'" type="vertical" />
                 <a-popconfirm v-btnPermission="'tm_001_del_09'" title="确定要删除?" @confirm="() => del(record)">
                                        <a>删除</a>
                                    </a-popconfirm>
                <!-- <a @click="del(record)">删除</a> -->
              </template>
            </span>
          </a-table>
        </a-col>
      </a-row>
      <a-modal
        title="竣工资料管理"
        :width="900"
        :visible="visible"
        :confirmLoading="loading.isSaving"
        @cancel="handleCancels"
        @ok="submit"
      >
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :hideRequiredMark="true">
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="所属项"
                prop="completionTemplateTypeId"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
              >
                <a-select placeholder="请选择" v-model="form.completionTemplateTypeId">
                  <a-select-option v-for="(item, index) in selectPro" :value="item.id" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="资料名称"
                prop="name"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
              >
                <BaseInput placeholder="请输入" v-model="form.name" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item
                prop="termId"
                label="应保管期限"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
              >
                <a-select placeholder="请选择" v-model="form.termId">
                  <a-select-option v-for="(item, index) in selectYear" :value="item.id" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
      <a-modal
        title="竣工资料分类"
        :width="900"
        :visible="visible1"
        :confirmLoading="loading.isSaving"
        @cancel="handleCancels1"
        @ok="submit1"
      >
        <a-form-model ref="ruleFormClassify" :model="classifyform" :rules="classifyRules" :hideRequiredMark="true">
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="名称"
                prop="name"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
              >
                <BaseInput placeholder="请输入" v-model="classifyform.name" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-model-item
                prop="enabled"
                label="状态"
                :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
              >
                <a-select placeholder="请选择" v-model="classifyform.enabled">
                  <a-select-option v-for="item in state" :value="item.value" :key="item.name">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import TitleName from '@/components/TitleName/index.vue'

import {
  getSelectList,
  getLeftList,
  TemplateList,
  TwoDetails,
  editNew1,
  editNew2,
  tableDelete,
  addClassify,
  editClassify,
  editData,
  addData,
  getDataRightList,
  deleteData,
} from '@/api/standingBook.js'
const columns = [
  {
    title: '资料名称',
    dataIndex: 'name',
  },
  {
    title: '保管期限',
    dataIndex: 'storageTerm',
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
    name:'a'+Date.now(),  mounted() {
    this.getLeftList()
    this.getSelectList()
  },
  components: {
    TitleName,
    Ellipsis
  },
  data() {
    this.columns = columns

    return {
      loading: {
        isSaving: false,
      },
      curTemplateIndex: '',
      form: {},
      classifyform: {},
      classifyRules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'change' }],
        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
      rules: {
        //
        name: [{ required: true, message: '请输入资料名称', trigger: 'change' }],
        termId: [{ required: true, message: '请选择资料期限', trigger: 'change' }],
        completionTemplateTypeId: [{ required: true, message: '请选择所属项', trigger: 'change' }],
      },
      leftList: [],
      dataSource: [],
      selectPro: [],
      selectYear: [],
      state: [
        { name: '启用', value: 1 },
        { name: '禁用', value: 0 },
      ],
      visible: false, //组件弹窗开关
      visible1: false, //组件弹窗开关
      isEditClassify: false,
      leftId: '',
    }
  },
  methods: {
    handleTempUpdate(type) {
      const index = this.curTemplateIndex
      if (type === 'edit' && index === '') {
        this.$message.error('请选择模板')
        return
      }
      this.classifyform = index !== '' && type === 'edit' ? { ...this.leftList[index] } : {}
      this.visible1 = true
      this.isEditClassify = type === 'edit'
    },
    getDataList(id) {
      if (id == '') {
        return
      }

      let params = {
        id: id,
      }
      getDataRightList(params).then((res) => {
        this.dataSource = res.data
      })
    },
    /**
     * @param {String} type 'onlyTemplate': 只更新左侧模板列表
     */
    getLeftList(type) {
      getLeftList().then((res) => {
        console.log(res)
        res.data.templateOne && res.data.templateOne.forEach((item) => {
          item.active = false
        })
        this.leftList = res.data.templateOne
        if (type !== 'onlyTemplate') {
          this.dataSource = res.data.templateTwo
        }
        this.getDataList('')
      })
    },
    getSelectList() {
      getSelectList().then((res) => {
        console.log(res)
        this.selectPro = res.data.templateOne
        this.selectYear = res.data.labelVOS
        console.log(this.selectPro)
      })
    },
    handleChange(e) {
      console.log(e)
      this.leftList.forEach((item) => {
        if (item.name == e) {
          this.classifyform = item
        }
      })
    },

    addEdit(record, type) {
      this.form = record
      if (type === 'add' && this.curTemplateIndex !== '') {
        this.form.completionTemplateTypeId = this.leftList[this.curTemplateIndex].id
      }
      this.visible = true
    },
    del(data) {
      let params = {
        id: data.id,
      }
      deleteData(params).then((res) => {
        this.getRightList()
        this.$message.success('删除成功')
      })
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.loading.isSaving) return
          this.loading.isSaving = true
          if (!this.form.id) {
            addData(this.form)
              .then((res) => {
                this.visible = false
                this.$message.success('添加成功')
                this.loading.isSaving = false
                this.getDataList(this.leftList[this.curTemplateIndex].id)
              })
              .catch(() => {
                this.loading.isSaving = false
              })
          } else {
            editData(this.form)
              .then((res) => {
                this.visible = false
                this.$message.success('修改成功')
                this.loading.isSaving = false
                this.getDataList(this.leftList[this.curTemplateIndex].id)
              })
              .catch(() => {
                this.loading.isSaving = false
              })
          }
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
      console.log(this.form)
    },
    getRightList() {
      if (this.leftId == '') {
        this.getLeftList()
      } else {
        this.getDataList('')
      }
    },
    submit1() {
      this.$refs.ruleFormClassify.validate((valid) => {
        if (valid) {
          if (this.loading.isSaving) return
          this.loading.isSaving = true
          if (!this.classifyform.id) {
            addClassify(this.classifyform)
              .then((res) => {
                this.visible1 = false
                this.$message.success('添加成功')
                this.loading.isSaving = false
                this.getLeftList()
                this.getSelectList()
              })
              .catch(() => {
                this.loading.isSaving = false
              })
          } else {
            editClassify(this.classifyform)
              .then((res) => {
                this.visible1 = false
                this.$message.success('修改成功')
                this.loading.isSaving = false
                this.getLeftList('onlyTemplate')
                this.getSelectList()
              })
              .catch(() => {
                this.loading.isSaving = false
              })
          }
        }
      })
    },
    handleCancels1() {
      this.visible1 = false
      this.$refs.ruleFormClassify.clearValidate()
    },
    handleCancels() {
      this.visible = false
      this.$refs.ruleForm.clearValidate()
    },
  },
}
</script>

<style>
.footer-btn {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
